import "./index.css";

export default function TodoItem(props) {
  // 数据源在App组件，更新数据的方法也要定义在App组件
  const handleClick = () => {
    const {
      delTodo,
      todo: { id, name },
    } = props;

    if (window.confirm(`您确认要删除 ${name} 吗?`)) {
      delTodo(id);
    }
  };

  const handleChange = () => {
    props.updateTodo(props.todo.id);
  };

  return (
    <li className="todo-item">
      <label>
        <input
          type="checkbox"
          checked={props.todo.isCompleted}
          onChange={handleChange}
        />
        <span className={props.todo.isCompleted ? "done" : ""}>
          {props.todo.name}
        </span>
      </label>
      <button className="btn btn-danger" onClick={handleClick}>
        删除
      </button>
    </li>
  );
}
